<!-- 已完成 -->
<template>
  <div class="page-box h100 display-flex czbj">
    <p class="title-label mb10">已完成</p>
    <dxtable
      :dataJson="dataJson"
      :portUrl="portUrl"
      :formJson="formJson"
      :qx="qx"
      :czFun="czFun"
      ref="databale"
      :fixed="true"
    ></dxtable>

    <n-modal v-model:show="showModal" preset="card" class="dfdsrtyrytyt">
      <template #header>
        <div>查看物流地址</div>
      </template>
      <div class="z9 fz12 cen pt40 pm40" v-if="Reason">
        {{ Reason }}
      </div>
      <div v-if="jdasfsd" class="sdfsdfyttytruy">
        <n-timeline>
          <n-timeline-item
            v-for="sd in Traces"
            type="success"
            :title="sd.Location"
            :content="sd.AcceptStation"
            :time="sd.AcceptTime"
          />
          <!-- <n-timeline-item content="啊" /> -->
        </n-timeline>
      </div>
      <div class="vertical-center" v-else>
        <div>
          <div class="spinner">
            <div class="half-circle-spinner">
              <div class="circle circle-1"></div>
              <div class="circle circle-2"></div>
            </div>
          </div>
          <div class="fz12 z9 cen">加载中...</div>
        </div>
      </div>
      <template #action>
        <div class="tr">
          <n-button class="ml20" @click="showModal = false"> 关闭 </n-button>
        </div>
      </template>
    </n-modal>

    <n-modal v-model:show="showModaler" preset="card" class="Stock-diagnosis">
      <template #header>
        <div>分成</div>
      </template>
      <div>
        <n-table :single-line="false">
          <thead>
            <tr>
              <th>分销等级</th>
              <th>应分成ID</th>
              <th>应分成姓名</th>
              <th>应分成邮箱</th>
              <th>会员等级</th>
              <th>分成金额</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="sd in jdfsddf">
              <td>{{ sd.fxdj }}</td>
              <td>{{ sd.id }}</td>
              <td>{{ sd.name }}</td>
              <td>{{ sd.email }}</td>
              <td>{{ sd.dengji }}</td>
              <td>{{ jsdfsdf(sd.bilie) }}</td>
            </tr>
            <tr>
              <td colspan="5">
                <div class="tr">应分总额</div>
              </td>
              <td>{{ hnhjsdfds(jdfsddf) }}</td>
            </tr>
          </tbody>
        </n-table>
        <div v-if="jdfsddf.length <= 0" class="vertical-center pt30 pm30">
          <div>
            <img src="../../../assets/img/noData.png" style="width: 120px" />
            <p>此账号没有上级</p>
          </div>
        </div>
      </div>
      <template #action>
        <div class="tr">
          <n-button
            type="info"
            v-if="jdfsddf.length > 0 && rowData.fczhuangt == 1"
            :loading="jdfswesd"
            @click="fenxiaosd"
          >
            确认
          </n-button>
          <n-button @click="showModaler = false" class="ml20"> 取消 </n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>
<script lang="ts" setup>
import { Options } from "@vicons/ionicons5";
import dxtable from "../../../components/util/dxtable.vue";
import sort from "../../../components/util/sort.vue";
import { dxget, dxpost, dialog } from "../../../util/index";
import { NButton, NImage, NTag } from "naive-ui";
import { h, ref, reactive, render } from "vue";
const databale = ref();
const showModal = ref(false);
const showModaler = ref(false);
const rowData = ref({});
const shhehsdrt = ref();
const hjshsd = ref();
const kjxzdd = ref([]);
const ShipperCode = ref();
const LogisticCode = ref();
const Traces = ref([]);
const jdasfsd = ref(false);
const Reason = ref();
const jdfsddf = ref([]);
const jdfswesd = ref(false);
const initeer = () => {
  databale.value.initDataExpose();
};
let zhidfds = [
  {
    label: "微信",
    value: "1",
  },
  {
    label: "支付宝",
    value: "2",
  },
  {
    label: "平台币",
    value: "3",
  },
];
const shjjseft = ref("1");
let dataJson = [
  {
    title: "订单编号",
    key: "ddON",
    width: "180",
  },
  {
    title: "快递公司",
    key: "ktgs",
    options: [],
    render(row) {
      try {
        return kjxzdd.value.filter((a) => a.value == row.ktgs)[0].label;
      } catch (e) {
        return "--";
      }
    },
  },
  {
    title: "快递编码",
    key: "ktbh",
  },
  {
    title: "商品名称",
    key: "c.title",
    search: true,
    render(row) {
      return row.jstitle;
    },
  },
  {
    title: "单价",
    key: "jsdanjia",
    width: 80,
  },
  {
    title: "数量",
    key: "number",
    width: 80,
  },
  {
    title: "支付金额",
    key: "jiner",
    width: 80,
  },
  {
    title: "购买人姓名",
    width: 80,
    key: "b.name",
    search: true,
    render(row) {
      return row.uname;
    },
  },
  {
    title: "电话",
    key: "uphone",
  },

  {
    title: "下单时间",
    key: "addTime",
    width: 150,
  },
  {
    title: "发货时间",
    key: "fhsj",
    width: 150,
  },
  {
    title: "支付方式",
    key: "zhifuqd",
    type: "select",
    options: [
      {
        label: "全部",
        value: "",
      },
      ...zhidfds,
    ],
    search: true,
    width: 80,
    render(row) {
      let ksdfsd = "--";
      if (row.zhifuqd == 1) {
        ksdfsd = "微信";
      }
      if (row.zhifuqd == 2) {
        ksdfsd = "支付宝";
      }
      if (row.zhifuqd == 3) {
        ksdfsd = "平台币";
      }
      return ksdfsd;
    },
  },
  {
    title: "成交时间",
    key: "cjsj",
    width: 150,
  },
  {
    title: "分成状态",
    key: "fczhuangt",
    width: 150,
    search: true,
    type: "select",
    options: [
      {
        label: "全部",
        value: "",
      },
      {
        label: "待分成",
        value: "1",
      },
      {
        label: "已分成",
        value: "2",
      },
    ],
    width: 80,
    render(row) {
      if (row.fczhuangt == 1 || !row.fczhuangt) {
        return h("span", { class: "z9" }, "待分成");
      }
      if (row.fczhuangt == 2) {
        return h("span", { class: "red" }, "已分成");
      }
    },
  },
];

const qx = {
  DeletePermissionID: "23456", //删除
  EditPermissionIdentifier: "23456", // 编辑
  NewPermissionIdentifier: "234567", // 新建
  ViewPermissionID: "234567", // 查看
};
const portUrl = "jyc/dingdanzhuangtai/dingdanzhuangtai?type=2&state=4";

let formJson = reactive([]);
// 获取字典内容
const xtgxxmfl = async () => {
  const { data }: any = await dxget("dxgjAdmin/getzd", { name: "jyckdgsbm" });
  kjxzdd.value = data;
};
xtgxxmfl();
const shenhedtyt = async () => {};
const czFun = {
  fun: (row) => {
    return [
      h(
        NButton,
        {
          type: "info",
          quaternary: true,
          onClick: async (e) => {
            rowData.value = row;
            fdnnsd(row.uid);
          },
        },
        row.fczhuangt == 1 ? "分成" : "查看分成明细"
      ),
      h(
        NButton,
        {
          type: "info",
          quaternary: true,
          onClick: async (e) => {
            showModal.value = true;
            jdasfsd.value = false;
            const { data } = await dxget("jyc/kuaidi/index", {
              LogisticCode: row.ktbh,
              ShipperCode: row.ktgs,
            });
            Reason.value = data.Reason;
            jdasfsd.value = true;
            Traces.value = data.Traces;
            console.log(data.Traces);
          },
        },
        "查看物流"
      ),
    ];
  },
};

const fdnnsd = async (uid) => {
  showModaler.value = true;
  const { data } = await dxget("jyc/api/getfenclist?zd=481,482", { uid });
  const jdfds = Object.values(data);
  console.log(jdfds);
  jdfsddf.value = jdfds;
};
const jsdfsdf = (sdd) => {
  console.log(rowData.value);
  try {
    let kjjdfsd = (rowData.value.jiner * sdd).toFixed(2);
    return `订单金额(${rowData.value.jiner})*比列(${sdd * 100}%)=${kjjdfsd}`;
  } catch (e) {
    return "--";
  }
  return "--";
};

const fenxiaosd = async () => {
  jdfswesd.value = true;
  const { data } = await dxpost("jyc/api/shoudongchufa", {
    zd: "481,482",
    uid: rowData.value.uid,
    jiner: rowData.value.jiner,
    beizhu: "商品分成",
  });
  await dxpost(
    "jyc/dingdanzhuangtai/dingdanzhuangtai",
    { id: rowData.value.id, fczhuangt: 2 },
    "put"
  );
  jdfswesd.value = false;
  initeer();
  showModaler.value = false;
};
const hnhjsdfds = (data) => {
  let jdfds = 0;
  data.map((a) => {
    let jsdfs = parseFloat(rowData.value.jiner * a.bilie);
    jdfds += jsdfs;
  });
  return jdfds.toFixed(2);
};
</script>
<style scoped>
.sdfsdfyttytruy {
  max-height: 600px;
  overflow: auto;
}
</style>
